import React, { Component } from "react";
import TodoHeader from "./components/TodoHeader";
import TodoInput from "./components/TodoInput";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";

class App extends Component {
  state = {
    // todos 保存所有待办事项
    todos: [
      { id: 1, title: "复习 HTML", completed: true },
      { id: 2, title: "复习 CSS", completed: false },
    ],
  };

  render() {
    return (
      <>
        <TodoHeader />

        <TodoInput />

        <TodoList todos={this.state.todos} />

        <TodoFooter />
      </>
    );
  }
}

export default App;
